<template>
  <div>
    <div class="category" v-if="isShow">
      <div class="header">
        <van-search
          v-model="value"
          shape="round"
          background="rgba(222,24,27,0.9)"
          placeholder="减价又打折,好货有逼格"
          clearable
          show-action
          @focus='toSearch'
        >
          <template #action>
            <van-icon name="chat-o" size="0.7rem" color="white" />
            <!-- <div style="color:white;" @click="toSearch">搜索</div> -->
          </template>
        </van-search>
      </div>
      <div class="g-content-container">
        <div class="content-left">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :title="item.name"
              v-for="(item, index) in tabBarItems"
              :key="item.id"
              @click="changeCategoryId(item.id)"
            />
          </van-sidebar>
        </div>
        <div class="content-right" v-if="!isLoading">
          <div class="content-right-top" style="padding: 15px 15px 0">
            <!-- <img :src="categoryData.banner.picUrl" width="100%" height="120"/> -->
            <van-swipe
              class="my-swipe"
              indicator-color="white"
              height="92"
            >
              <van-swipe-item>
                <img
                  :src="(categoryData.banner || {}).picUrl"
                  width="100%"
                  fit="none"
                />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div
            class="content-right-middle"
            v-for="(categoryItem, index) in categoryData.data"
            :key="index"
          >
            <p class="header">{{ categoryItem.name }}</p>
            <van-grid :gutter="10" column-num="3" icon-size="60px">
              <van-grid-item
                v-for="(item, index) in categoryItem.itemList"
                :key="index"
                :icon="item.picUrl"
                :text="item.name"
                clickable="true"
                style="padding: 0px"
                @click='toDetail(item.name)'
              />
            </van-grid>
          </div>
        </div>
        <div class="loading-container" v-if="isLoading">
          <van-loading size="24px" vertical>请稍候...</van-loading>
        </div>
        <!-- <CategoryTab class="sidebar" />
      <CategoryContent class="main" /> -->
      </div>
    </div>
    <router-view v-if="!isShow"></router-view>
  </div>
</template>

<script>
// 引入图片的懒加载
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import { getCategoryContent } from "@/api/category";
// 引入侧边栏数据
import { categoryNames } from "./config";

export default {
  name: "Category",
  data() {
    return {
      value: "", // 收集用户输入的内容
      activeKey: 0, // 点击切换侧边栏
      tabBarItems: [], // 侧边栏数据列表
      curId: "", // 当前点击分类的id
      categoryData: {}, // 切换分类的数据
      isShow: true, // 是否展示分类页面
      isLoading: false, // 是否显示加载状态
    };
  },
  mounted() {
    // 初始化
    this.initTabBar();
    this.isLoading = true;
    //  获取分类页数据
    this.changeCategoryId(this.tabBarItems[0].id);
    if (this.categoryData.data) {
      this.isLoading = false;
    }
  },
  updated(){
    // 详情页跳转回来的时候 修改isShow的值
    if(this.$route.query.isShow){
      this.isShow = true
    }
  },
  methods: {
    // 初始化侧边栏
    initTabBar() {
      this.tabBarItems = categoryNames;
    },
    //  切换分类的回调
    async changeCategoryId(id) {
      this.curId = id;
      this.isLoading = true;
      const result = await getCategoryContent(id);
      this.categoryData = result;
      this.isLoading = false;
    },
    // 用户点击了搜索按钮的回调
    toSearch() {
      this.$router.push("/search");
    },
    // 点击去详情页的回调
    toDetail(text) {
      this.isShow = false;
      this.$router.push("/detail?text=" + text);
    },
  },
};
</script>

<style scoped>
.content-left {
  width: 20%;
  float: left;
  box-sizing: border-box;
}
.van-sidebar-item {
  height: 1.2rem;
  text-align: center;
  font-weight: bold;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}

.content-right {
  float: right;
  width: 80%;
}

.content-right-middle {
  width: 100%;
  height: 100%;
}

.content-right-middle .header {
  font-size: 14px !important;
  padding-left: 20px;
  font-weight: bold;
}

/* 加载的样式 */
/* .loading-container {
  position: absolute;
  left: 50%;
  top: 50%;
  right: 50%;
  bottom: 50%;
} */

/* .content-right-top {
  width: 100%;
  height: 100%;
} */
/* .my-swipe .van-swipe{
  width: 100%;
  height: 100%;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 3rem;
  border: rgb(196, 196, 196);
}
.content-right-middle {
  float: left;
  width: 100%;
  height: 10rem;
  border: 1px solid #333;
} */

/* .category{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color:#f5f5f5;
  }
  .g-content-container{
    displayflex: flex;
    padding: 46rem 0;
  }
  .sidebar{
    width: 80rem;
    height: 100%;
  }
  .main{
    flex: 1;
    height: 100%;
  } */
</style>